<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script type="module">
        import { createElement, createTextNode } from './h.js'
        import { patch } from './patch.js'
        const vnode1 = createElement(
            'div',
            { style: { color: 'red',background:'purple' }, key: 'a' },
            createElement('li',{key:'a'},createTextNode('a')),
            createElement('li',{key:'b'},createTextNode('b')),
            createElement('li',{key:'c'},createTextNode('c')),
            createElement('li',{key:'d'},createTextNode('d'))
        );
        // 虚拟节点就是一个对象来描述我们真实的节点

        patch(app, vnode1); // 初次渲染
        const vnode2 = createElement(
            'div',
            { style: { color: 'blue' }, key: 'a' },
            createElement('li',{key:'b'},createTextNode('b')),
            createElement('li',{key:'m'},createTextNode('m')),
            createElement('li',{key:'a'},createTextNode('a')),
            createElement('li',{key:'c'},createTextNode('c')),
            createElement('li',{key:'q'},createTextNode('q')),
        );
        setTimeout(()=>{
            patch(vnode1,vnode2); // 用vnode2 和 vnode1 做diff 更新vnode1上的元素
        },1000)
    </script>
</body>

</html>